<div class="d-flex w-100 h-100 overflow-hidden"
     [class.position-relative]="miniPhone()"
>
  @if(miniPhone()&&!sidebarService.isSideBarClosed){
    <button nz-button nzSize="large"
            class="position-absolute z-1 shadow"
            [style]="'margin-left: 260px;'"
            [class.z-max]="miniPhone()"
            (click)="toggleSidebar()">
      <span nz-icon nzType="close" nzTheme="outline"></span>
    </button>
  }
  <div class="sidebar p-0 m-0 d-flex flex-column h-100 z-2"
       [class.d-none]="sidebarService.isSideBarClosed"
       [class.position-fixed]="miniPhone()"

  >
    <div class="bg-theme overflow-y-scroll scrollbar-y-none flex-grow-1">
      <!-- 历史记录标记 -->
      @defer (on immediate) {
        <app-chat-history  [chatHistoryTitle]="historyTitles"
                          (chatHistoryChangeEvent)="handleChatHistoryAction($event)"></app-chat-history>
      } @placeholder {
        <nz-skeleton></nz-skeleton>
      }
    </div>
    <div class="bg-theme sticky-bottom z-0">
      <!-- 登录标记 -->
      <div class="w-100">
        <div class="d-flex flex-row">
          <button class="rounded-5 m-2 bg-theme text-theme" nz-button
                  (click)="openSettingPage()"
          >
            {{ 'chat-history.settings' | translate}}<span nz-icon nzType="setting" nzTheme="outline"></span>
          </button>
          <button class="rounded-5 m-2 d-flex flex-row align-items-center bg-theme text-theme" nz-button
                  (click)="openPromptPage()"
          >
            {{ 'chat-history.prompts' | translate}}<span nz-icon nzType="appstore" nzTheme="outline"></span>
          </button>
        </div>
        @defer (on viewport) {
          <app-account-label></app-account-label>
        } @placeholder {
          <nz-skeleton></nz-skeleton>
        }
      </div>
    </div>
  </div>
  <div class="content  bg-theme2 col position-relative p-0 flex-grow-1"
  >
    @if (!miniPhone()) {
      <span
        class="bg-theme2 text-theme2 position-absolute top-50 translate-middle-y z-1 shift-scale"
        nz-icon style="left: 30px;" (click)="toggleSidebar()"
        [nzType]="sidebarService.isSideBarClosed?'right':'left'"
        nzTheme="outline">
      </span>
    }
    <router-outlet></router-outlet>
  </div>
</div>


